﻿@model IList<VideoChat.Models.ChatMessage>
<div class="row-fluid">
    <div class="span3">
        <div id="users" class="well">
            <h4>Пользователи онлайн</h4>
            <div class="alert alert-info">Для звонка пользователю нажмите на его имя</div>
            <ul class="unstyled">
            </ul>
        </div>
    </div>
    <div class="span9">
        <div id="commentContent"class="well">
            <h4>Отзыв</h4>
            <div class="alert alert-success">Оставьте, пожалуйста, отзыв о качестве видео и звука</div>
            <div id="chat">
                @*<div class="chat_content">
                    @if (Model != null)
                    {
                        foreach (var msg in Model)
                        {
                            var msgClass = msg.SenderKey == ViewBag.MyKey ? "" : "";
                        <div class="@msgClass">
                            <div class="chat_mes_title">
                                <span class="name">@msg.SenderName</span><span class="date">@msg.FormattedDate
                                </span>
                            </div>
                            <div class="chat_mes_text">
                                @msg.Content
                            </div>
                        </div>
                        }
                    }
                </div>*@
            </div>
            <div class="chat_form">
                <form action="#">
                <button class="btn btn-success" type="button" onclick="Send();">
                    Отправить
                </button>
                <div class="chat_field">
                    <textarea id="msg" placeholder="Сообщение"></textarea>
                </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="login_modal">
    <div class="modal-header">
        <h3>Представьтесь, пожалуйста</h3>
    </div>
    <div id="modal_content" class="modal-body">
        @using (Ajax.BeginForm("Login", null, new AjaxOptions { HttpMethod = "POST", OnSuccess = "Start" }, new { Class = "form-search" }))
        {
            <input id="login" name="login" class="input-xlarge" type="text" placeholder="Ваше имя" />
            <span id="login-error" class="help-inline error" style="display: none;"></span>
            <button class="btn btn-success" type="submit">Войти в чат</button>
        }
    </div>
    <div class="modal-footer">
    </div>
</div>
<div class="modal fade" id="rename_modal">
    <div class="modal-header">
        <h3>Введите новое имя</h3>
    </div>
    <div class="modal-body">
        @using (Ajax.BeginForm("Login", null, new AjaxOptions { HttpMethod = "POST", OnSuccess = "OnRename" }, new { Class = "form-search" }))
        {
            <input id="newLogin" name="login" class="input-xlarge" type="text" placeholder="Ваше имя" />
            <button class="btn btn-success" type="submit">Сменить имя</button>
        }
    </div>
    <div class="modal-footer">
    </div>
</div>
<div class="modal fade" id="call_modal">
    <div class="modal-header">
        <h3>Звонок</h3>
    </div>
    <div class="modal-body">
    </div>
    <div class="modal-footer">
        <button id="acceptCall" class="btn btn-success" type="button" onclick="AcceptCall();">
            Ответить
        </button>
        <button id="rejectCall" class="btn" type="button" onclick="RejectCall();">
            Отклонить
        </button>
        <button id="cancelCall" class="btn" type="button" onclick="CancelCall();">
            Отмена
        </button>
    </div>
</div>
@section scripts
{
    <script type="text/javascript">
    var CHAT = {};
    var OPTIONS = {};

    $(function () {
        $("#users").fixHeight(function () { return $(window).height() - 145; });
        $("#commentContent").fixHeight(function () { return $(window).height() - 145; });
    });

    function Start(data) {
        if (data.success) {
            $("#login_modal").modal('hide');
            $("#userName").html(data.name);
            $("#userName").click(Rename);
            // Имя текущего пользователя
            OPTIONS.MyName = data.name;
            // Ключ комнаты чата
            OPTIONS.RoomKey = 'MAIN';
            // Прокси-объект чата
            CHAT = $.connection.chat;

            // Обработчик получения сообщения
            CHAT.OnSend = OnSend;
            // Обработчик присоединения к комнате
            CHAT.OnJoinRoom = OnJoinRoom;
            CHAT.OnUpdateUsers = OnUpdateUsers;
            CHAT.OnCall = OnCall;
            CHAT.OnRejectCall = OnRejectCall;
            CHAT.OnAcceptCall = OnAcceptCall;
        } else {
            $("#login").addClass("error");
            $("login-error").html(data.errors["login"]).show();
        }

        $('#users').delegate('li', 'click', Call);

        $("#msg").keydown(function (e) {
            if (e.keyCode == 13 && !e.shiftKey) {
                Send();
                return false;
            }
            return true;
        });

        $.connection.hub.start(function () {
            CHAT.joinRoom(OPTIONS.RoomKey, OPTIONS.MyName);
        });
    }

    function OnJoinRoom(key) {
        OPTIONS.MyKey = key;
    }

    function OnUpdateUsers(data) {
        var usersList = $("#users ul"),
                newList = "";
        for (var i = 0; i < data.length; i++) {
            var user = data[i];
            newList += '<li data-key="' + user.Key + '"><i class="icon-user"></i>' + user.Name + '</li>';
        }
        usersList.html(newList);
    }

    function Send() {
        var messageInput = $("#msg"),
                // Создаём объект, нименования полей которого соответствуют полям ChatMessage
                msg = {
                    'SenderName': OPTIONS.MyName,
                    'RoomKey': OPTIONS.RoomKey,
                    'Content': messageInput.val()
                };
        CHAT.send(msg);
        messageInput.val("");
        messageInput.focus();
    }

    function OnSend(msg) {
        var chatContent = $(".chat_content"),
                msgClass = 'chat_message';
        if (msg.SenderName == OPTIONS.MyName)
            msgClass += ' chat_mes_my';
        else {
            var chatSound = document.getElementById("chatSound");
            chatSound.play();
        }
        chatContent.append(
                '<div class="' + msgClass + '"><div class="chat_mes_title"><span class="name">' +
                    msg.SenderName +
                    '</span><span class="date">' + msg.FormattedDate + '</span></div><div class="chat_mes_text">' +
                    msg.Content +
                    '</div></div>');
        chatContent.scrollTop(chatContent[0].scrollHeight - chatContent.height());
    }

    function Call() {
        var callModal = $("#call_modal"),
                key = $(this).data('key'),
                name = $(this).text();

        callModal.find(".modal-body").html("Звоним " + name);
        callModal.find("#acceptCall").hide();
        callModal.find("#rejectCall").hide();
        callModal.find("#cancelCall").show();
        OPTIONS.Calling = true;
        OPTIONS.CalleeKey = key;
        CHAT.call(key, OPTIONS.MyKey, OPTIONS.MyName);

        $("#call_modal").modal();
    }

    function OnCall(senderKey, senderName) {
        if (OPTIONS.Calling)
            CHAT.rejectCall(senderKey, OPTIONS.MyKey, OPTIONS.MyName);
        else {

            var callModal = $("#call_modal");

            callModal.find(".modal-body").html('Звонит ' + senderName + '. Ответить?');
            callModal.find("#acceptCall").show();
            callModal.find("#rejectCall").show();
            callModal.find("#cancelCall").hide();
            OPTIONS.Calling = true;
            OPTIONS.CallerKey = senderKey;
            OPTIONS.CallerName = senderName;
            $("#call_modal").modal();
            var callSound = document.getElementById("callSound");
            callSound.play();
        }
    }

    function AcceptCall() {
        CHAT.acceptCall(OPTIONS.CallerKey, OPTIONS.CallerName, OPTIONS.MyName);
    }

    function OnAcceptCall(isMy, roomKey) {
        document.location = '@Url.Action("Room", "Home")' + '?isMy=' + isMy + '&roomKey=' + roomKey;
    }

    function CancelCall() {
        $("#call_modal").modal('hide');
        OPTIONS.Calling = false;
        CHAT.rejectCall(OPTIONS.CalleeKey, OPTIONS.MyKey, OPTIONS.MyName);
    }

    function RejectCall() {
        if (OPTIONS.Calling) {
            CHAT.rejectCall(OPTIONS.CallerKey, OPTIONS.MyKey, OPTIONS.MyName);
            $("#call_modal").modal('hide');
            OPTIONS.Calling = false;
        }
    }

    function OnRejectCall(recieverKey, recieverName) {
        $("#call_modal").modal('hide');
        if (OPTIONS.Calling) {
            alert(recieverName + ' отклонил звонок.');
            OPTIONS.Calling = false;
        }
    }

    function SetName() {
        $("#login_modal").modal();
        $("#login").focus();
    }

    function Rename() {
        $("#rename_modal").modal();
        $("#newLogin").focus();
    }

    function OnRename(data) {
        $("#rename_modal").modal('hide');
        $("#userName").html(data.name);
        OPTIONS.MyName = data.name;
        CHAT.rename(data.name);
    }
    </script>
    @if (ViewBag.Login != null && !String.IsNullOrEmpty(ViewBag.Login.ToString()))
    {
        <script type="text/javascript">Start({ success: true, name: '@ViewBag.Login' });</script>
    }
    else
    {
        <script type="text/javascript"> SetName();</script>
    }
}}
